<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my-switch .switch-btn,.my-switch>span{
            vertical-align: middle;
        }
        .my-switch{
            font-size: 15px;
            white-space: nowrap;
            display: inline-block;
        }
        .my-switch>span{
            display: inline-block;
            height: 2em;
            line-height: 2em;
            padding: 0px 10px;
            font-weight: bold;
        }
        .my-switch>span.active{
            color: #57a8fb;
        }
        .switch-btn{
            display: inline-block;
            width: 4em;
            height:2em;
            border-radius:2em;
            cursor: pointer;
            user-select: none;
            background-color: #dcdfe6;
            box-shadow: 0 0 4px #8d8d8e inset;
            transition: all 150ms ease;
        }
        .switch-btn.active{
            background-color: #57a8fb;
            box-shadow: 0 0 4px #3c75ad inset;;
        }
        .switch-btn>input[type="checkbox"]{
            display: none;
        }
        .switch-btn .pot{
            display: inline-block;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            transform: scale(0.76);
            background-color: white;
            box-shadow: 0 0 4px #afafaf;
            transition: all 200ms ease;
        }
        .switch-btn>input[type="checkbox"]:checked + .pot{
            margin-left: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>flag:{{ flag }}</p>

        <div class="my-switch">
            <span :class="{active:!flag}">按年付费</span>
            <label class="switch-btn" :class="{ active:flag }">
                <input type="checkbox" :checked="flag" @change="printSwitchBtnState($event)">
                <span class="pot"></span>
            </label>
            <span :class="{active:flag}">按月付费</span>
        </div>
        <br><br>
        <div class="my-switch" style="font-size: 20px;">
            <span :class="{active:!flag}">按年付费</span>
            <label class="switch-btn" :class="{ active:flag }">
                <input type="checkbox" :checked="flag" @change="printSwitchBtnState($event)">
                <span class="pot"></span>
            </label>
            <span :class="{active:flag}">按月付费</span>
        </div>

    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                   flag:false
                }
            },
            methods:{
                printSwitchBtnState(e){
                    this.flag = e.target.checked
                    console.log( e.target.checked )
                }
            }
        }).mount("#app");
    </script>
</body>
</html>